/**
*@author       Vinsea(liwentao@thunisoft.com)
*@createTime   2019/02/21
*@updateTime   2019/02/21
*@description  滑动验证组件的样式
*@rule
 */
@import '../../../config/config.less';

//命名空间
@css-prefix-captcha: ~"@{css-prefix}captcha-slide";
@blueDark: #546ce6;
@red: #ff2000;


.@{css-prefix-captcha}-wrapper {
    position: relative;
    //width: 500px;
}

.@{css-prefix-captcha}-img-wrapper {
    width: 100%;
    //height: 333px;
    position: absolute;
    bottom: 0;
    z-index: -1;
    opacity: 0;
    background-color: #000;
    box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: bottom @transition-time, opacity @transition-time;
}

.@{css-prefix-captcha}-wrapper-normal {
    height: 380px;

    .@{css-prefix-captcha}-img-wrapper {
        bottom: 40px;
        z-index: 2;
        opacity: 1;
    }
}

.@{css-prefix-captcha}-wrapper-hover {
    height: 30px;

    .@{css-prefix-captcha}-img-wrapper-show {
        bottom: 40px;
        z-index: 2;
        opacity: 1;
    }
}

.@{css-prefix-captcha}-slider-wrapper {
    width: 100%;
    line-height: 30px;
    background-color: #e1e1e1;
    border: 1px solid transparent;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0;
}

.@{css-prefix-captcha}-btn {
    width: 60px;
    height: 38px;
    line-height: 38px;
    font-size: 24px;
    background-color: #fff;
    box-shadow: 0 0 13px 1px rgba(15, 25, 71, 0.2);
    border-radius: 10px;
    text-align: center;
    position: absolute;
    left: 0;
    top: -4px;
    z-index: 2;
    cursor: move;
    transition: box-shadow @transition-time;

    .@{css-prefix}icon {
        line-height: 38px;
    }

    &:hover {
        box-shadow: 0 0 15px 2px rgba(15, 25, 71, .3);
    }
}

.@{css-prefix-captcha}-tmp {
    position: absolute;
    left: 0;
    /*border: 1px solid #fff;*/
    /*box-shadow: 5px 5px 8px 1px rgba(255, 255, 255, 0.2);*/
}

.@{css-prefix-captcha}-img {
    width: 100%;
    height: 100%;
}

.@{css-prefix-captcha}-pass {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    height: 30px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid @primary-color;
    /*background: linear-gradient(to left, fade(#546ce6, 90%), fade(#52b3f7, 90%));*/
}

.@{css-prefix-captcha}-img-refresh {
    font-size: 24px;
    color: #f1f1f1;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    transition: color @transition-time;

    &:hover {
        color: #aaaaaa;
    }
}

.@{css-prefix-captcha}-text {
    font-size: 12px;
}

.@{css-prefix-captcha}-tip {
    color: #fff;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: -30px;
    transition: bottom @transition-time;
}

.@{css-prefix-captcha}-tip-fail {
    background: linear-gradient(to left, @red, @warning-color);
}

.@{css-prefix-captcha}-tip-success {
    background: linear-gradient(to left, @blueDark, @primary-color);
}

.@{css-prefix-captcha}-tip-show {
    bottom: 0;
}

.@{css-prefix-captcha}-img-result {
    font-size: 14px;
    padding: 50px 0;
    text-align: center;
    color: fade(#fff, 60%);
}

.@{css-prefix-captcha}-success {
    cursor: not-allowed;
    background-color: #e1e1e1;

    .@{css-prefix-captcha}-pass {
        border-color: @primary-color;
    }

    .@{css-prefix-captcha}-btn {
        color: @primary-color;
        cursor: not-allowed;
        box-shadow: 0 0 15px 2px fade(@primary-color, 50%);
    }

    .@{css-prefix-captcha}-img-refresh {
        cursor: not-allowed;
    }
}

.@{css-prefix-captcha}-fail {
    .@{css-prefix-captcha}-pass {
        border-color: @red;
    }

    .@{css-prefix-captcha}-btn {
        color: @red;
        box-shadow: 0 0 15px 2px fade(@red, 50%);
    }
}

.@{css-prefix-captcha}-fail-btn {
    pointer-events: none;
    animation: shake .5s linear;
}

.@{css-prefix-captcha}-spin-icon-load {
    animation: loopRotate 1s linear infinite;
}

.@{css-prefix-captcha}-load-fail {
    .@{css-prefix-captcha}-slider-wrapper {
        cursor: not-allowed;
    }

    .@{css-prefix-captcha}-btn {
        cursor: not-allowed;
        pointer-events: none;
    }
}
